import React, { Component } from 'react'
import { connect } from 'react-redux'
import { WhiteSpace, WingBlank, Card, Flex, Tabs, Badge, List, Button } from 'antd-mobile'
import { Chart, Line, Scale, Guide, Area, Point, Axis, Interval } from 'ant-design-mobile-chart'
import TitleNavBar from '@/common/components/displays/TitleNavBar'
import axios from 'axios'
import axiosFunc from '@/common/api/axiosFunc.js'
import { Link } from 'react-router-dom'

import '@/common/style/ui.less'
import '@/common/style/AgencyTelant.less'
import imageUrl from "../../images/live-icon.png"
const Item = List.Item;
const Brief = Item.Brief;
class AgencyTelant extends Component {
    constructor(props) {
        super(props)
        this.state = {
            titleData: {
                title: "Back",
                centerTitle: "Talentld",
                rightTitle: ""
            },
            adminAgencyTelantparams: "",
            tabs: [
                {
                    title: <Badge><span style={{
                        fontSize: "12px"
                    }}>Info</span></Badge>
                },
                {
                    title: <Badge><span style={{
                        fontSize: "12px"
                    }}>Talent</span></Badge>
                },
                {
                    title: <Badge ><span style={{
                        fontSize: "12px"
                    }}>Performance</span></Badge>
                },
            ],
            itemData: [
                {
                    id: 1,
                    name: "Talent Info",
                    desc: "TalentName",
                    extraData: "AgencyName/AgencyId",
                    arrow: "",
                },
                {
                    id: 2,
                    name: "Register Date",
                    desc: "reason",
                    extraData: "2018-11-01 ",
                    arrow: "horizontal"
                }
            ],
            itemData2: [
                {
                    id: 1,
                    name: "TelanName",
                    time: "2 weeks",
                    extraData: "2000/80",
                    thumb: imageUrl
                },
                {
                    id: 2,
                    name: "TelanName",
                    time: "2 weeks",
                    extraData: "2000/80",
                    thumb: imageUrl
                }
            ],
            Talentdata: [{
                time: '周一',
                tem: 6,
                rain: 11
            }, {
                time: '周二',
                tem: 9.5,
                rain: 13
            }, {
                time: '周三',
                tem: 14.5,
                rain: 14
            }, {
                time: '周四',
                tem: 18.2,
                rain: 10
            }, {
                time: '周五',
                tem: 21.5,
                rain: 12
            }, {
                time: '周六',
                tem: 25.2,
                rain: 16
            }, {
                time: '周日',
                tem: 26.5,
                rain: 13
            }],
            Columnardata: [],
            Agencydata: [],
            listData: [
                {
                    id: 1,
                    name: "Talent Ranking",
                    time: "Inactive 2 weeks",
                    extraData: "2000/80",
                    thumb: require("../../images/thumbUsericon.png")
                },
                {
                    id: 2,
                    name: "Talent Ranking",
                    time: "Inactive 2 weeks",
                    extraData: "2000/80",
                    thumb: require("../../images/thumbUsericon.png")
                }
            ]
        }
    }
    formatTime(timestamp){
        var date = new Date(timestamp);
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';
        var m = date.getMinutes() + ':';
        var s = date.getSeconds();
        return Y+M+D;
    }
    componentDidMount() {
        let itemid = this.props.match.params.id, _this = this;
        axios.all([axiosFunc.getagencylist(itemid)])
            .then(axios.spread(function (reponse) {
                let reponsedata = reponse.data.data;
                let reponselist = reponse.data.data.agencyStat;
                _this.setState({
                    adminAgencyTelantparams: reponsedata,
                });
                reponselist.forEach((element, index) => {
                    _this.state.Columnardata.push({
                        time: _this.formatTime(element.date),
                        tem: element.activeTalents?element.activeTalents:0
                    });
                    _this.state.Agencydata.push({
                        time: _this.formatTime(element.date),
                        tem: element.newTalents?element.newTalents:0
                    });
                });
                console.log(_this.state.Columnardata);
                console.log(_this.state.Agencydata);
                debugger;
            })).catch((err) => {
                alert(err)
            })

    }
    render() {
        return (
            <div className="AgencyTelant-container">
                <TitleNavBar titleData={this.state.titleData} Drawerstatus={false} />
                <WhiteSpace />
                <Card className="carditem">
                    <Card.Body className="talantInfo">
                        <Flex className='bgWhite talantInfoGrid'>
                            <Flex.Item>
                                <Flex direction='column'>
                                    <img src={require("../../images/thumbUsericon.png")} style={{
                                        display: "inline-block",
                                        marginLeft: '12px',
                                        width: "65px",
                                        height: "65px",
                                        borderRadius: "50%"
                                    }} alt='' />
                                </Flex>
                            </Flex.Item>
                            <Flex.Item>
                                <Flex direction='column'>
                                    <span className='title'>Diamond</span>
                                    <span className='number'>{this.state.adminAgencyTelantparams.totalDiamonds ?
                                        this.state.adminAgencyTelantparams.totalDiamonds : 0}</span>
                                </Flex>
                            </Flex.Item>
                            <Flex.Item>
                                <Flex direction='column'>
                                    <span className='title'>Performance</span>
                                    <span className='number'>{this.state.adminAgencyTelantparams.activeTalents ?
                                        this.state.adminAgencyTelantparams.activeTalents : 0}</span>
                                </Flex>
                            </Flex.Item>
                            <Flex.Item>
                                <Flex direction='column'>
                                    <span className='title'>Talent</span>
                                    <span className='number'>{this.state.adminAgencyTelantparams.talentCount ?
                                        this.state.adminAgencyTelantparams.talentCount : 0}</span>
                                </Flex>
                            </Flex.Item>
                        </Flex>
                    </Card.Body>
                </Card>
                <WhiteSpace />
                <div className="monthlyitemcard">
                    <div className="itemcardleft">
                        <Card>
                            <Card.Header
                                title={<div><p >Active Talents</p> <label
                                >{this.state.adminAgencyTelantparams.activeTalents ?
                                    this.state.adminAgencyTelantparams.activeTalents : 0}</label></div>}
                            />
                            <Card.Body>
                                <Chart source={this.state.Columnardata} width="202" height="50" pixelRatio={window.devicePixelRatio}>
                                    <Interval field="time" position="year*sales" />
                                    <Axis field="year" enable={false} />
                                    <Axis field="sales" enable={false} />
                                </Chart>
                            </Card.Body>
                        </Card>
                        <Card>
                            <Card.Header
                                title={<div><p>New Talents</p> <label
                                >{this.state.adminAgencyTelantparams.newTalents ?
                                    this.state.adminAgencyTelantparams.newTalents : 0}</label></div>}
                            />
                            <Card.Body>
                                {/* Agencydata */}
                                <Chart source={this.state.Agencydata} width="202" height="50" pixelRatio={window.devicePixelRatio}>
                                    <Area position="time*tem" />
                                    <Line position="time*tem" color="#1890FF" />
                                    <Axis field="time" enable={false} />
                                    <Axis field="tem" enable={false} />
                                    <Scale field="time" />
                                    <Scale field="tem" tickCount={5} min={0} />
                                </Chart>
                            </Card.Body>
                        </Card>
                    </div>
                </div>
                <WhiteSpace />
                <Tabs tabs={this.state.tabs}
                    initialPage={0}
                    className="adminAgencytabscontainer"
                    tabBarActiveTextColor='rgba(172, 51, 193, .9)'
                    tabBarUnderlineStyle={{ borderColor: 'rgba(172, 51, 193, .9)' }}
                    onChange={(tab, index) => { console.log('onChange', index, tab); }}
                    onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
                >
                    <div style={{ backgroundColor: '#fff' }}>
                        <List className="my-list">
                            {
                                this.state.itemData.map((item) =>
                                    <Item
                                        key={item.id}
                                        extra={item.extraData}
                                        arrow={item.arrow}
                                        multipleLine
                                        onClick={() => { }}
                                    >
                                        {item.name}
                                    </Item>
                                )
                            }
                        </List>
                    </div>
                    <div style={{ display: 'flex', backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center', }}>
                        <List className="talent-list">
                            {
                                this.state.listData.map((item, index) =>
                                    <Item
                                        key={index}
                                        extra={item.extraData}
                                        arrow="horizontal"
                                        thumb={<div>{index + 1}<img src={item.thumb} style={{
                                            display: "inline-block",
                                            marginLeft: '12px',
                                            width: "55px",
                                            height: "55px",
                                            borderRadius: "50%"
                                        }} /></div>}
                                        multipleLine
                                        onClick={() => { this.linkHandle() }}
                                    >
                                        {item.name} <span>level</span><Brief>{item.time}</Brief>
                                    </Item>
                                )
                            }
                        </List>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
                        <List className="listData-list" renderHeader={() => 'Reward'}>
                            {
                                this.state.listData.map((item, index) =>
                                    <Item
                                        key={index}
                                        extra={item.extraData}
                                        arrow="horizontal"
                                        thumb={<div>{index + 1}<img src={item.thumb} style={{
                                            display: "inline-block",
                                            marginLeft: '12px',
                                            width: "55px",
                                            height: "55px",
                                            borderRadius: "50%"
                                        }} /></div>}
                                        multipleLine
                                        onClick={() => { this.linkHandle() }}
                                    >
                                        {item.name} <span>level</span><Brief>{item.time}</Brief>
                                    </Item>
                                )
                            }
                        </List>
                    </div>
                </Tabs>
                <WhiteSpace />
            </div>
        )
    }
}

function mapStateToProps(state, ownProps) {
    return {

    }
}

export default connect(mapStateToProps)(AgencyTelant);
